<template>
  <div style="height: 100%; text-align: center">
    <div class="displayer">
      <div style="margin-bottom: 10px">
        <el-button
          icon="el-icon-back"
          @click="backToJobList"
          circle
          type="primary"
          style="
            display: inline;
            margin-right: 50px;
            margin-bottom:10px;
            vertical-align: center;
          "
        ></el-button>
        <div style="display: inline; vertical-align: center">
          <span style="font-size: 30px; font-weight: 500; color: #878585">{{
            title
          }}</span>
        </div>
      </div>
      <div>
        <el-form :inline="true" label-width="80px" label-position="left">
          <el-form-item label="发布日期">
            <el-input
              disabled
              :value="datetime"
              style="width: 300px; margin-right: 100px"
            ></el-input>
          </el-form-item>
          <el-form-item label="截止日期">
            <el-input disabled :value="ddl" style="width: 300px"></el-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true" label-width="80px" label-position="left">
          <el-form-item label="网申地址">
            <el-input
              disabled
              :value="website"
              style="width: 300px; margin-right: 100px"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系邮箱">
            <el-input disabled :value="email" style="width: 300px"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <mavon-editor
        class="md"
        style="margin: 0 auto"
        :value="content"
        :subfield="false"
        :defaultOpen="'preview'"
        :toolbarsFlag="false"
        :toolbars="toolbars"
        :editable="false"
        :scrollStyle="true"
        :ishljs="true"
      />
    </div>
  </div>
</template>

<style scoped>
.displayer {
  width: 90%;
  margin-left: 5%;
  text-align: left;
  vertical-align: center;
  border-radius: 10px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.8);
}
</style>

<script>
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
import { getJob } from '@/api/job.js'

export default {
  components: {
    mavonEditor,
  },
  data() {
    return {
      id: '',
      title: "企业招聘信息",
      ddl: "xx",
      website: "",
      email: "",
      content: "",
      datetime: "",
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        mark: true, // 标记
        superscript: true, // 上角标
        quote: true, // 引用
        ol: true, // 有序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        help: true, // 帮助
        code: true, // code
        subfield: true, // 是否需要分栏
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        undo: true, // 上一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        navigation: true, // 导航目录
      },
    };
  },
  created() {
    let id = this.$route.query.id

    let data = { id: id }
    getJob(data).then(response => {
      this.id = response.data.id
      this.content = response.data.content
      this.title = response.data.title
      this.ddl = response.data.ddl
      this.website = response.data.website
      this.email=response.data.email
      this.datetime = response.data.datetime
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    backToJobList() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.push('/job/index');
    }
  },
};
</script>